<template>
	<div class="toast-wrap csl-ignore" v-if="visible">
		<div class="toast">
			<div class="instruction">请输入6位密码</div>
			<div class="password-input">
				<input type="password" maxlength="6" v-model="password" placeholder="请输入6位密码" />
			</div>
			<div class="number-pad">
				<div class="number" v-for="n in 9" :key="n" @click="inputNumber(n)">
					{{ n }}
				</div>
				<div class="number" @click="inputNumber(0)">0</div>
				<div class="number" @click="deleteNumber">删除</div>
			</div>
			<div class="action-buttons">
				<button @click="confirmPassword">确定</button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			visible: true,
			password: ''
		};
	},
	methods: {
		show() {
			this.visible = true;
		},
		hide() {
			this.visible = false;
		},
		inputNumber(number) {
			if (this.password.length < 6) {
				this.password += number;
			}
		},
		deleteNumber() {
			this.password = this.password.slice(0, -1);
		},
		confirmPassword() {
			// if (this.password.length === 6) {
			// 	// 这里可以处理密码确认的逻辑，例如验证密码是否正确
			// 	alert('密码已确认: ' + this.password);
			// 	this.hide();
			// } else {
			// 	alert('请输入完整的6位密码');
			// }
			this.$emit('confirm', this.password);
			this.hide();
		}
	}
};
</script>

<style scoped>
.toast-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1;
}

.toast {
	width: 80%;
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
}

.instruction {
	margin-bottom: 10px;
	text-align: center;
}

.password-input {
	margin-bottom: 20px;
}

.password-input input {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.number-pad {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 20px;
}

.number {
	width: 30%;
	text-align: center;
	padding: 10px;
	margin-bottom: 10px;
	background-color: #eee;
	border-radius: 5px;
	cursor: pointer;
}

.number:hover {
	background-color: #ddd;
}

.action-buttons {
	text-align: center;
}

.action-buttons button {
	padding: 10px 20px;
	border: none;
	background-color: #007bff;
	color: white;
	border-radius: 5px;
	cursor: pointer;
}

.action-buttons button:hover {
	background-color: #0056b3;
}
</style>
